<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { House, User, Menu, ShoppingBag } from '@element-plus/icons-vue'
import type {UserVO, ProductRO, CartEntity, CartProductRO} from "@/api";
import {userService} from '@/service/UserService'
import { productService } from '@/service/ProductService';
import {cartService} from "@/service/CartService";


/////////////////用户信息部分/////////////////////
let userInfo = ref<UserVO>()
userService.getUserInfo().then(res => {
  userInfo.value = res.data
}).catch(err => {
  console.log(err)
  alert("获取用户信息失败！")
})


/////////////////边栏高亮部分/////////////////////
const route = useRoute()
const router = useRouter()

//设置默认的菜单项
const activeMenu = ref(getMenuIndex(route.path))

//监听路由变化
watch(route, (newRoute) => {
  activeMenu.value = getMenuIndex(newRoute.path)
})

//菜单项选择时更新activeMenu
const handleMenuSelect = (index: string) => {
  switch (index) {
    case '1':
      router.push('/main')
      break
    case '2':
      router.push('/order-history')
      break
    case '3-1':
      router.push('/user-profile')
      break
    case '3-2':
      router.push('/cart')
      break
    case '3-3':
      router.push('/favorites')
      break
  }
}

//根据路由路径返回菜单项的index
function getMenuIndex(path: string) {
  switch (path) {
    case '/main':
      return '1'
    case '/order-history':
      return '2'
    case '/user-profile':
      return '3-1'
    case '/cart':
      return '3-2'
    case '/favorites':
      return '3-3'
    default:
      return '4' //默认主页
  }
}

///////////////页面设定部分////////////////
const productId = route.query.queryId ? String(route.query.queryId) : ''
const product = ref<ProductRO>()
productService.getProductDetail(productId).then(res => {
  console.log(res)
  product.value = res.data;
})

const user = ref<UserVO>()
const cartProduct = ref<CartProductRO>({
  id: undefined,
  cartId: undefined,
  product: undefined,
  quantity: 0,
});
const cart = ref<CartEntity>()

function addToCart(product: ProductRO) {
  userService.getUserInfo().then(res => {
    user.value = res.data;
    cartService.getCartInfo(user.value?.id!).then(res => {
      cartProduct.value.cartId = res.data.id;
      cartProduct.value.product = product;
      cartProduct.value.quantity! += 1;
      cartService.addToCart(cartProduct.value).then(res => {
        cart.value = res.data;
      })
    }).catch(err => {
      console.log(err)
    })
  }).catch(err => {
    console.log(err)
  })
}

</script>

<template>
  <div class="h-full flex">
    <!--边栏-->
    <aside class="fixed top-0 left-0 w-40 bg-primary-100 text-primary-800 border-r-2 border-primary-300 h-full">
      <div class="overflow-y-auto">
        <el-menu :default-active="activeMenu" @select="handleMenuSelect">
          <el-menu-item index="1">
            <template #title>
              <el-icon><House /></el-icon>主页
            </template>
          </el-menu-item>
          <el-menu-item index="2">
            <template #title>
              <el-icon><Menu /></el-icon>历史订单
            </template>
          </el-menu-item>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><User /></el-icon>个人中心
            </template>
            <el-menu-item-group title="用户">
              <el-menu-item index="3-1">个人中心</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="商品">
              <el-menu-item index="3-2">购物车</el-menu-item>
              <el-menu-item index="3-3">收藏夹</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </div>
    </aside>

    <!--主容器-->
    <div class="flex-1 flex flex-col ml-20%"> <!-- Add left margin for sidebar -->
      <!--顶栏-->
      <header class="fixed top-0 left-0 w-full text-right text-sm bg-primary-200 p-4 border-b-2 border-primary-300 z-100">
        <div class="flex items-center justify-end space-x-4 mt-3">
          <el-avatar :size="36"></el-avatar>
          <span data-testid="user-info" class="ml-2">Hi, {{ userInfo?.name }}</span>
        </div>
      </header>

      <div class="flex justify-center mt-10% mb-20%">
        <div class="w-70%">
          <!--------------------------------变化区域-------------------------------->
          <div v-if="product">
            <div class="product-detail">
              <div class="product-image flex items-center justify-center w-full">
                <img :src="product.image" alt="product.title" class="w-70% h-auto object-cover" />
              </div>
              <div class="product-info">
                <h2 class="text-2xl font-bold flex items-center justify-center w-full">{{ product.title }}</h2>
                <p class="text-lg flex items-center w-full">{{ product.description }}</p>
                <p class="text-sm flex items-center w-full color-neutral">{{ product.type}}</p>
                <p class="text-xl font-bold  color-#fb7299">￥{{ product.price ? product.price.toFixed(2) : '0.00'}}</p>

                <div class="product-tags mt-4">
                  <span v-for="tag in product.tags" :key="tag.name" class="tag inline-block bg-gray-200 text-gray-700 text-sm px-3 py-1 rounded-full mr">
                    {{ tag.name }}
                  </span>
                </div>
              </div>
            </div>
            <div class="flex items-center justify-center w-full" @click="addToCart(product)">
              <el-button color="#fb7299" round size="large">加入购物车</el-button>
            </div>
          </div>
          <!--------------------------------变化区域-------------------------------->
        </div>
      </div>


    </div>
  </div>
</template>

<style scoped>
aside {
  position: fixed;
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  border-right: 0.2em solid #E5E7EB;
  z-index: 100;
}

header {
  left: 20%;
  width: 80%;
  background-color: #F1F5F9;
  height: 10%;
}
</style>
